<template>
    <div class="mapContainer" :id="props.id"></div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
const emits = defineEmits(['init'])
const props = defineProps({
    id:{
        type:String,
        default:UtilTools.randomName(true,16,16)
    },
    center:{
        type:Array,
        default:[116.397428, 39.90923]
    },
    zoom:{
        type:Number,
        default:11
    }
})
onMounted(() => {
  AMapLoader.load({
    key: '120d15b51ab43328178eeaa23dd9863a', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.GeoJSON'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map(props.id, {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: props.zoom, // 初始化地图级别
        center: props.center, // 初始化地图中心点位置
      });
      emits('init',map)
    })
    .catch((e) => {
      console.log(e);
    });
});
onUnmounted(() => {
  map?.destroy();
});
defineExpose({
    addMark(){}
})
</script>
<style lang="less" scoped>
    .mapContainer{
        width:100vw;
        height:100vh;
        overflow:hidden;
        :deep(.amap-logo),
        :deep(.amap-copyright){
            display:none !important;
        }
    }
</style>